<template>
	<view>
		<tt-bar leftIcon="icon-back" leftText="再去逛逛" :leftTapFun="toIndex" ></tt-bar>
		<view class="resBox">
				<image class="img" mode="widthFix" src="../../static/payRst.png"></image>
			<text class="resText">支付成功!</text>
			<view class="ttBox">
				<view class="line"></view>
				<text >接下来的消息流程</text>
				<view class="line"></view>
			</view>
			<view class="ulList">
				<view class="row">
					<view class="circle">
						
					</view>
					<text>在订单详情页查看联系方式或在线咨询</text>
				</view>
				<view class="row">
					<view class="circle">
						
					</view>
					<text>在体验课程时，验证体验码，享受学习之美</text>
				</view>
			</view>
			<view class="btnBox">
				<button @tap="toOrderDt">查看订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	export default {
		components: {
			ttBar
		},
		data() {
			return {
				orderId:'',
			};
		},
		methods:{
			toOrderDt(){
				this.toPage({
					url:'orderDt',
					id:this.orderId
				})
			},
			toIndex(){
				this.toPage({
					url:'index'
				})
			}
		},
		onLoad(cfm) {
			this.orderId=cfm.id
		},
		onPullDownRefresh() {
			setTimeout(() => {
				
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.resBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		.img{
			width: 70%;
			display: block;
			margin-top: 40upx;
		}
		.resText{
			margin: 100upx;
			text-align: center;
			font-size: 50upx;
			// font-weight: bold;
			color: #ff9c00;
			margin-top: 40upx;
		}
		.btnBox{
			display: flex;
			justify-content: space-around;
			padding: 0 20upx;
			button{
				margin: 0;
				height: 80upx;
				padding: 0 60upx;
				font-size: 32upx;
				border: 2upx solid #ff9c00;
				line-height: 76upx;
				border-radius: 40upx;
				color: #ff9c00;
				background-color: rgba(0,0,0,0);
			}
			button:after{
				border: none;
				outline: none;
			}
			
		}
	}
	.ttBox{
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 32upx;
		.line{
			flex-grow: 1;
			height: 2px;
			border-top: 1px dotted #aaaaaa;
			margin: 0 30upx;
		}
		text{
			font-size: 32upx;
			color: #202932;
		}
	}
	.ulList{
		display: flex;
		flex-direction: column;
		margin-bottom: 100upx;
		.row{
			display: flex;
			align-items: center;
		}
		.circle{
			width: 18upx;
			height: 18upx;
			border-radius: 50%;
			background-color: #ffb93f;
			margin-right: 16upx;
		}
		text{
			font-size: 28rpx;
				color: #9a9a9a;
		}
	}
</style>
